<template>
	<view class="car">
		<!-- 空白页 -->
		<view v-if="empty===true" class="empty">
			<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
			<view v-if="hasLogin" class="empty-tips">
				空空如也
				<navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛>
				</navigator>
			</view>
			<view v-else class="empty-tips">
				空空如也
				<view class="navigator" @click="navToLogin">去登陆></view>
			</view>
		</view>
		<view v-else class="container">
			<!-- <view class="c-header">
				<text class="tips">全场加购价</text>
				<text class="desc">再购130元立享满130元可超值换购</text>
				<text class="right">
					去凑单<text class="yticon icon-you"></text>
				</text>
			</view> -->
			<view class="car-list" v-for="(list,index) in FzBigList" :key="index">
				<view class="title_name">
					<view class="left">
						<image src="/static/img/1/94.png" mode="widthFix" v-if="list.isSelected"
							@click.stop="changefirststatus(index)"></image>
						<image src="/static/img/1/81.png" mode="widthFix" v-if="!list.isSelected"
							@click.stop="changefirststatus(index)"></image>
					</view>
					{{list.ShopTatle||"平台自营"}}
				</view>
				<view class="line"></view>
				<view v-for="(item,index2) in list.goodsList" class="carbox" :key="index2">
					<view class="activity" v-if="item.name">
						<view class="left">
							<image src="/static/img/1/94.png" mode="widthFix" v-if="item.isSelected"
								@click.stop="changeactstatus(item.id,index)"></image>
							<image src="/static/img/1/81.png" mode="widthFix" v-if="!item.isSelected"
								@click.stop="changeactstatus(item.id,index)"></image>
						</view>
						<view class="middle">
							<text class="name">{{item.name}}</text>
							<text class="price">￥{{item.price}}</text>
						</view>
						<view class="right">
							<view class="option">
								<uni-number-box :disabled="item.isdisabled" class="step" :min="1"
									:value="item.iQuantity" :index="item.id" @eventChange="numberChanges">
								</uni-number-box>
							</view>
						</view>
					</view>
					<view class="list-item" v-for="(itemd,index) in item.goods" :key="item.iSKUId">
						<view class="top">
							<view class="left">
								<image v-show="!item.id||itemd.packageDetail" src="/static/img/1/94.png" mode="widthFix"
									v-if="itemd.isChecked" @click.stop="changestatus(itemd.id,index2)"></image>
								<image v-show="!item.id||itemd.packageDetail" src="/static/img/1/81.png" mode="widthFix"
									v-if="!itemd.isChecked" @click.stop="changestatus(itemd.id,index2)"></image>
							</view>


							<view class="right">
								<view class="goods-img" @click="toDetail(itemd,index2)">
									<image :src="itemd.oSKU.cImgUrl" mode="aspectFill"></image>
								</view>
								<view class="info">
									<text class="name"
										@click="toDetail(itemd,index2)">{{itemd.oSKU.productId_name}}</text>
									<!-- <text class="osku" v-if="itemd.oSKU.centerValuesNotExists.specNames"
										@click="toDetail(itemd,index2)">{{itemd.oSKU.centerValuesNotExists.specNames}}</text>
									 -->
									<text class="price" @click="toDetail(itemd,index2)">￥{{itemd.fNewSalePrice}}</text>

									<view class="picker" v-show="!item.id">
										<!-- :SKUId="getEMSListData(item.iSKUId)" -->
										<picker @change="bindPickerChange($event,itemd,index2)" @click="getEms(itemd)"
											:value="itemd.dlyType||'EMS'" :range="EMSList" range-key="name"
											mode="selector">
											<view class="uni-input">{{itemd.dlyTypeName||'请选择'}}
												<image src="../../static/img/1/1.png" mode="aspectFit"
													@click="getEms(itemd)" class="down"></image>
											</view>

										</picker>


										<view class="option">
											<uni-number-box :disabled="itemd.isdisabled" class="step" :min="1"
												:max="itemd.oSKU.lInventoryCount" :value="itemd.iQuantity"
												:index="itemd.id" @eventChange="numberChange"></uni-number-box>
										</view>
									</view>

								</view>
							</view>
						</view>
						<view class="bottom">
							<view class="list-goods">
								<view class="list-item" v-for="o in itemd.packageDetail" :key="o.iSKUId">
									<view class="name">{{o.cProductName}}&nbsp;&nbsp;&nbsp;x{{o.iProductNum}}</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
			<Guess :goods_id_exclude='goods_id_exclude' :categoryid='categoryid' :type='type'
				v-if="goods_id_exclude.length>0"></Guess>
		</view>
		<view class="footer-btn">
			<view class="left">
				<view class="checkall">
					<image src="/static/img/1/81.png" mode="aspectFill"
						v-if="carList.length != checkedLength||carList.length==0" @click="checkAll(1)">
						<image src="/static/img/1/94.png" mode="aspectFill"
							v-if="carList.length == checkedLength&&carList.length!=0" @click="checkAll(0)">

						</image>全选
				</view>
				<view class="freight" v-if="!edit">不含运费</view>
			</view>
			<view class="right" v-if="!edit">
				<view class="total">合计：<text class="price">{{total}}</text></view>
				<view class="settlement" @click="toorder">结算（{{checkedLength}}）</view>
			</view>
			<view class="right" v-if="edit" style="justify-content: flex-end;">
				<view class="settlement" @click="delGoods">删除（{{checkedLength}}）</view>
			</view>
		</view>


		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass" v-if="specClass == 'show'">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content">
				<view class="a-t">
					<image v-for="(item,imageitem) in detail.lsSpecItemAlbums" v-if="iSpecItemId === item.iSpecItemId"
						:src="item.imgUrl" :key='imageitem'></image>
					<view class="right">
						<text class="price" v-for="(item,sIndex) in detail.lsProductSkus"
							v-if="lsProductSkusStr == item.cSpecIds" :key="sIndex+1">¥{{item.fSalePrice}}</text>
						<!-- <uni-number-box v-for="(item,sIndex) in detail.lsProductSkus" v-if="lsProductSkusStr == item.cSpecIds" :key="sIndex+5"
						 class="step" :min="1" :max="item.lInventoryCount" :value="1" :index="1" @eventChange="numberChange"></uni-number-box> -->
						<text class="stock" v-for="(item,sIndex) in detail.lsProductSkus"
							v-if="lsProductSkusStr == item.cSpecIds"
							:key="sIndex+2">库存：{{item.lInventoryCount}}{{item.cSKUModelDescription}}</text>
						<view class="selected">
							已选：
							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
								{{sItem.cSpecItemName}}
							</text>
						</view>
					</view>
				</view>
				<view v-for="(item,index) in specList" :key="index" class="attr-list">
					<text>{{item.cName}}</text>
					<view class="item-list">
						<text v-for="(childItem, childIndex) in item.lsSpecItem" :key="childIndex" class="tit"
							:class="{selected: childItem.selected}" @click="selectSpec(childIndex, childItem.id)">
							{{childItem.cSpecItemName}}
						</text>
					</view>
				</view>
				<button class="btn" @click="toggleSpec">完成</button>
			</view>
		</view>
		<footers :types="4" :id="id"></footers>
	</view>
</template>

<script>
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue";
	import Guess from "@/components/like/guess2.vue";
	import footers from "@/components/shop/footer.vue";

	export default {
		components: {
			uniNumberBox,
			Guess,
			footers
		},
		data() {
			return {
				empty: false, //空白页现实  true|false
				carList: [],
				total: 0,
				checkedLength: 0,
				hasLogin: true,
				goods_id_exclude: [],
				categoryid: [],
				type: 0,
				edit: false,
				specClass: "none",
				detail: {},
				iSpecItemId: "",
				lsProductSkusStr: "",
				specSelected: [],
				specList: [],
				specChildList: [],
				currentCar: {},
				isdisabled: false,
				FzBigList: [],
				EMSList: [{
						name: "快递物流",
						id: "EMS"
					},
					{
						name: "门店自提",
						id: "PICKUP"
					}
				],
				id: ''
			};
		},
		computed: {
			// if(this.$SysCache.get('token') == null){
			// 	this.hasLogin = false
			// }else{
			// 	this.hasLogin = true
			// }
		},
		onLoad(options) {
			this.id = options.id
			// this.onloads()
		},
		onShow() {
			this.onloads();

		},
		mounted() {},

		methods: {
			getEms(item) {
				let data = {
					iShopId: item.iShopId,
					SKUId: item.iSKUId
				}
				this.EMSList = []
				this.$Request.post(this.$api.httpApi.home.getEMSList, data).then(res => {
					console.log('配送方式', res)
					if (res.data.sku.length > 0) {
						// this.EMSList = res.data.sku
						res.data.sku.forEach(items => {
							res.data.Store.forEach(store => {
								if (items.id == store.id) {
									this.EMSList.push(store)
								}
							})
						})
					} else {
						this.EMSList = res.data.Store
					}

				})
			},
			onloads() {
				this.total = 0;
				this.checkedLength = 0;
				this.$Request.post(this.$api.httpApi.car.list + "&token=" + this.$SysCache.get("token")).then((res) => {
					if (res.code == 200) {
						// this.carList = res.data.lsCart;
						console.log('onloads', JSON.parse(JSON.stringify(res.data.lsCart)))
						this.FiniShing(res.data.lsCart)
						res.data.lsCart.forEach((item) => {
							this.goods_id_exclude.push(item.iProductId);
						});
						if (res.data.lsCart.length > 0) {
							this.empty = false;
						} else {
							this.empty = true;
						}
					}
				});
			},
			// 除去无效数据
			trimSpace(array) {
				for (var i = 0; i < array.length; i++) {
					if (array[i] == "" || array[i] == null || typeof(array[i]) === "undefined") {
						array.splice(i, 1);
						i = i - 1;
					}
				}
				return array;
			},
			// 对数据进行整理
			FiniShing(FiniShing) {
				console.log('对数据进行整理', FiniShing)
				let ShopListArr = []
				let NewShopListArr = []
				let obj = {}
				let Arr = []
				let arr = FiniShing
				let map = {}
				let dest = []
				FiniShing.forEach(item => {
					ShopListArr.push(item.shop)
				})
				console.log('店铺列表', ShopListArr)
				// ShopListArr.splice(ShopListArr.findIndex(item => item === undefined), 1)
				ShopListArr = this.trimSpace(ShopListArr)
				// 利用对象访问属性的方法，判断对象中是否存在key
				for (var si = 0; si < ShopListArr.length; si++) {
					if (!obj[ShopListArr[si].id]) {
						NewShopListArr.push(ShopListArr[si]);
						obj[ShopListArr[si].id] = true;
					}
				}
				console.log('店铺数组去重', NewShopListArr)
				// 根据去重的店铺数组获取各个店铺的优惠券
				NewShopListArr.forEach((ActionItem, index) => {
					let data = {
						pager: {
							pageIndex: "1",
							pageSize: "100",
							totalPage: "",
							totalCount: ""
						},
						order: [{
							name: "create_time",
							order: "desc"
						}],
						conditions: [{
							name: "member_scope_id",
							value1: ActionItem.id,
							type: "string",
							op: "eq"
						}]
					}
					// this.$Request.post4(this.$api.httpApi.home.query, data).then(res => {
					// 	Arr.push(...res.data) // 整理所有店铺下的优惠券
					// 	this.ActionArr = Arr
					// 	console.log('优惠券asas', this.ActionArr)
					// })
				})
				// 对购物车添加对应商铺名称
				console.log(arr)
				for (var i = 0; i < arr.length; i++) {
					let ai = arr[i];
					let ShopTatle = ''
					let ShopId = ''
					if (ai.shop === undefined) {
						ShopTatle = ''
						ShopId = ''
					} else {
						ShopTatle = ai.shop.cShopTag
						ShopId = ai.shop.id
					}
					if (!map[ShopId]) {
						dest.push({
							ShopTatle: ShopTatle,
							ShopId: ShopId,
							isSelected: false,
							GoodsShow: [ai],
						});
						map[ShopId] = ai;
					} else {
						for (var j = 0; j < dest.length; j++) {
							var dj = dest[j];
							if (dj.ShopTatle == ShopTatle) {
								dj.GoodsShow.push(ai);
								break;
							}
						}
					}
				}
				this.FzBigList = dest
				this.carList = FiniShing

				console.log('分组后的购物车', this.FzBigList)

				this.FzBigList.forEach(item => {
					let lPackageIds = []
					item.GoodsShow.forEach(dd => {
						if (dd.sPackageUUID) {
							lPackageIds.push(dd.sPackageUUID)
						} else {

							lPackageIds.push('')
						}

					})
					lPackageIds = [...new Set(lPackageIds)]
					console.log('lPackageIds' + lPackageIds)
					let temp = []
					lPackageIds.forEach(p => {
						let list = {
							name: "",
							price: 0,
							iQuantity: 1,
							isSelected: false,
							id: p,
							goods: []
						}
						item.GoodsShow.forEach(e => {

							if (p == e.sPackageUUID) {
								list.goods.push(e)

								list.price += e.fNewSalePrice * 1
								list.iQuantity = e.iPackageNum
								if (e.fixedSale == 1 && !e.packageDetail) {
									list.name = "固定套餐"

								} else {
									if (!e.packageDetail) {
										list.name = "搭配套餐"
									} else {

									}
								}
							} else if (p == 0 && !e.sPackageUUID) {
								console.log(e.iSKUId)
								list.goods.push(e)
								list.goods = [...new Set(list.goods)]
							}


						})

						temp.push(list)

					})
					this.$set(item, "goodsList", temp)
					console.log(item.goodsList)
				})
			},
			// 选择/更新购物车(更改配送方式)
			bindPickerChange(e, item, index) {
				console.log('bindPickerChange', e, item, index)
				if (!isNaN(e.detail.value)) {
					console.log('1', this.EMSList, e.detail.value)
					let params = {
						items: [{
							id: item.id,
							iSKUId: item.iSKUId,
							iQuantity: item.iQuantity,
							iProductId: item.iProductId,
							dlyType: this.EMSList[e.detail.value].id
						}]
					}
					this.$Request.post(this.$api.httpApi.car.update + "&token=" + this.$SysCache.get("token"), params)
						.then(res => {
							if (res.code === 200) {
								console.log('选择/更新购物车(更改配送方式)', res)
								this.onloads()
							}
						})
				} else {
					return false
				}
			},
			numberChanges(data) {
				this.isdisabled = true;
				console.log(data)
				let datas = []
				if (this.edit) {
					return
				}
				this.FzBigList.forEach(item => {


					item.goodsList.forEach(s => {
						if (s.id == data.index) {
							s.goods.forEach(dd => {
								let obj = {
									areaid: "",
									bIsMain: dd.bIsMain,
									canPurchaseCount: "",
									deliverytype: dd.dlyType,
									dlyType: dd.dlyType,
									enablecustomized: false,
									hvMainPt: dd.hvMainPt,
									iCorpId: dd.iCorpId,
									iPackageNum: data.number,
									iProductId: dd.iProductId,
									iQuantity: data.number,
									iSKUId: dd.iSKUId,
									iShopId: dd.iShopId || '',
									iStatus: dd.oSKU.iStatus,
									id: dd.id,
									isFixedSale: dd.fixedSale || 0,
									isSpikeMode: false,
									lInventoryCount: dd.oSKU.lInventoryCount,
									lPackageId: dd.lPackageId,
									name: dd.oSKU.productId_name,
									packageValid: dd.packageValid,
									productAttribute: dd.productAttribute,
									realproductattribute: dd.realproductattribute,
									sPackageUUID: dd.sPackageUUID,
									singleprice: dd.fNewSalePrice
								}
								datas.push(obj)
							})
						}



					})

				})
				this.$Request
					.post(
						this.$api.httpApi.car.update +
						"&token=" +
						this.$SysCache.get("token"), {
							items: datas,
						}
					)
					.then((res) => {
						this.isdisabled = false;
						if (res.code == 200) {
							this.onloads()
						}
					});
			},
			numberChange(data) {
				this.isdisabled = true;
				if (!this.edit) {
					let datas = [];
					console.log(data);
					this.carList.forEach((item, indexs) => {
						if (item.id == data.index) {
							let obj = {
								areaid: "",
								bIsMain: item.bIsMain,
								canPurchaseCount: "",
								deliverytype: item.dlyType,
								dlyType: item.dlyType,
								enablecustomized: false,
								hvMainPt: item.hvMainPt,
								iCorpId: item.iCorpId,
								iPackageNum: item.iPackageNum || '',
								iProductId: item.iProductId,
								iQuantity: data.number,
								iSKUId: item.iSKUId,
								iShopId: item.iShopId || '',
								iStatus: item.oSKU.iStatus,
								id: item.id,
								isFixedSale: item.fixedSale || 0,
								isSpikeMode: false,
								lInventoryCount: item.oSKU.lInventoryCount,
								lPackageId: item.lPackageId || '',
								name: item.oSKU.productId_name,
								packageValid: item.packageValid,
								productAttribute: item.productAttribute,
								realproductattribute: item.realproductattribute,
								sPackageUUID: item.sPackageUUID || '',
								singleprice: item.fNewSalePrice
							};

							datas.push(obj);
						}
					});

					this.$Request
						.post(
							this.$api.httpApi.car.update +
							"&token=" +
							this.$SysCache.get("token"), {
								items: datas,
							}
						)
						.then((res) => {
							this.isdisabled = false;
							if (res.code == 200) {
								// this.carList[data.index].iQuantity = data.number;
								// this.carList[data.index].fTotalPrice =
								// 	(res.data[0].fSalePrice * 100 * data.number) / 100;

								// this.getTotal();
								this.onloads()
							}
						});
				}
			},
			changestatus(id, index) {
				let flag = 0
				this.carList.forEach((item) => {
					if (item.id == id) {
						item.isChecked = !item.isChecked;
					}

				});
				this.FzBigList[index].GoodsShow.forEach(item => {
					if (item.isChecked) {
						flag++
					}

				})
				if (flag == this.FzBigList[index].GoodsShow.length && flag != 0) {
					this.FzBigList[index].isSelected = true
				} else {
					this.FzBigList[index].isSelected = false
				}
				this.getTotal();
			},
			changeactstatus(id, index) {
				// let flag = 0
				// this.carList.forEach((item) => {
				// 	if (item.id == id) {
				// 		item.isChecked = !item.isChecked;
				// 	}

				// });
				this.FzBigList[index].goodsList.forEach(item => {
					if (item.id == id) {
						item.isSelected = !item.isSelected;
						item.goods.forEach(dd => {
							dd.isChecked = item.isSelected
						})
					}

				})
				// this.FzBigList[index].GoodsShow.forEach(item => {
				// 	if (item.isChecked) {
				// 		flag++
				// 	}

				// })
				// if (flag == this.FzBigList[index].GoodsShow.length && flag != 0) {
				// 	this.FzBigList[index].isSelected = true
				// } else {
				// 	this.FzBigList[index].isSelected = false
				// }
				this.getTotal();
			},
			changefirststatus(index) {
				this.FzBigList[index].isSelected = !this.FzBigList[index].isSelected
				this.FzBigList[index].GoodsShow.forEach(item => {
					item.isChecked = this.FzBigList[index].isSelected
				})
				this.FzBigList[index].goodsList.forEach(item => {
					item.isSelected = this.FzBigList[index].isSelected
				})
				this.getTotal();
			},
			getTotal() {
				this.checkedLength = 0;
				this.total = 0;
				let datas = [];
				this.carList.forEach((item) => {
					if (item.isChecked) {
						this.checkedLength++;
						// let obj = {}
						// obj.token = this.$SysCache.get('token')||null
						// obj.id = item.id
						// obj.iSKUId = item.iSKUId
						// obj.iQuantity = item.iQuantity
						// obj.iProductId = item.iProductId
						// obj.dlyType = item.dlyType
						// datas.push(obj)
						this.total = (this.total * 1000 + item.fTotalPrice * 1000) / 1000;
					}
				});
				// if(this.checkedLength>0){
				// 	this.$Request.post(this.$api.httpApi.car.GenerateOrderByShoppingCart+'&token='+this.$SysCache.get('token'),{"items":datas}).then(res => {
				// 	if (res.code == 200) {
				// 			this.total = res.data
				// 		}
				// 	})
				// }
			},
			checkAll(str) {
				if (str == 1) {
					this.carList.forEach((item) => {
						item.isChecked = true;
					});
					this.FzBigList.forEach(item => {
						item.isSelected = true
					})
				} else {
					this.carList.forEach((item) => {
						item.isChecked = false;
					});
					this.FzBigList.forEach(item => {
						item.isSelected = false
					})
				}
				this.getTotal();
			},
			// 结算
			toorder() {
				let datas = [];
				this.carList.forEach((item) => {
					if (item.isChecked) {
						let obj = {};
						obj.id = item.id;
						obj.iSKUId = item.iSKUId;
						obj.iQuantity = item.iQuantity;
						obj.iProductId = item.iProductId;
						obj.dlyType = item.dlyType;
						datas.push(obj);
					}
				});
				console.log('asasas', datas, this.FzBigList)
				if (datas.length === 0) {
					uni.showToast({
						title: '请选择需要结算的商品',
						icon: 'none',
						duration: 2000
					});
				} else {
					let ToCompare = []
					this.FzBigList.forEach(item => {
						let obj = item.GoodsShow
						let temp = []
						obj.forEach(it => {
							if (it.isChecked) {
								temp.push(it)
							}
						})
						let arr = temp.map(o => o.dlyType)
						let aaa = arr.every(el => el === arr[0])

						ToCompare.push(aaa)

					})
					console.log('ToCompare', ToCompare, ToCompare.includes(false))
					if (ToCompare.includes(false)) {
						uni.showToast({
							title: '每个店铺下只支持一种配送方式',
							icon: 'none',
							duration: 2000
						})
					} else {
						this.$Request.post(this.$api.httpApi.car.GenerateOrderByShoppingCart + "&token=" + this.$SysCache
							.get("token"), {
								items: datas,
							}).then((res) => {
							if (res.code == 200) {
								uni.navigateTo({
									url: `/pages/order/order`,
								});
							}
						});
					}
				}
			},
			//删除购物车商品
			delGoods() {
				let that = this;
				uni.showModal({
					title: "提示",
					content: "确定删除？",
					success: function(res) {
						if (res.confirm) {
							let datas = [];
							that.carList.forEach((item) => {
								if (item.isChecked) {
									let obj = {};
									obj.id = item.id;
									datas.push(obj);
								}
							});

							if (that.checkedLength > 0) {
								that.$Request
									.post(
										that.$api.httpApi.car.del +
										"&token=" +
										that.$SysCache.get("token"), {
											items: datas,
										}
									)
									.then((res) => {
										if (res.code == 200) {
											uni.showToast({
												title: res.message,
												duration: 2000,
											});
											that.carList.forEach((item) => {
												item.isChecked = false;
											});
											that.onloads();
										}
									});
							}
						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			},
			cancelEdit() {
				this.edit = false;
			},
			toDetail(list, index) {
				console.log("asas", list, index)
				uni.navigateTo({
					url: `/pages/detail/index?id=${list.iProductId}&iShopId=${list.iShopId}`,
				});
			},
			//规格弹窗开关
			toggleSpec(temp) {
				if (this.specClass === "show") {
					let datas = [];
					let obj = {};
					obj.token = this.$SysCache.get("token") || null;
					obj.id = this.currentCar.id;
					obj.iSKUId = this.iSKUId;
					obj.iQuantity = this.currentCar.iQuantity;
					obj.iProductId = this.currentCar.iProductId;
					obj.dlyType = this.currentCar.dlyType;
					datas.push(obj);
					console.log(datas);
					this.$Request
						.post(
							this.$api.httpApi.car.update +
							"&token=" +
							this.$SysCache.get("token"), {
								items: datas,
							}
						)
						.then((res) => {
							if (res.code == 200) {
								this.onloads();
							}
						});

					this.specClass = "hide";
					setTimeout(() => {
						this.specClass = "none";
					}, 250);
				} else if (this.specClass === "none") {
					this.currentCar = temp;
					this.$Request
						.get(
							this.$api.httpApi.goods.iteminfo +
							"&id=" +
							temp.iProductId +
							"&token=" +
							this.$SysCache.get("token")
						)
						.then((res) => {
							if (res.code == 200) {
								// console.log(res.data)
								this.detail = res.data;
								this.specList = res.data.lsSpecs;
								//规格 默认选中第一条
								this.specList.forEach((item) => {
									for (let [index, cItem] of new Map(
											item.lsSpecItem.map((cItem, index) => [index, cItem])
										)) {
										this.specChildList.push(cItem);
										if (index === 0) {
											this.$set(cItem, "selected", true);
											this.specSelected.push(cItem);
											// break; //forEach不能使用break
										}
									}
								});
								let arr = [];
								this.specSelected.forEach((item) => {
									arr.push(item.id);
									this.iSpecItemId = item.id;
								});
								this.lsProductSkusStr = arr.join(";");
								this.detail.lsProductSkus.forEach((item) => {
									if (item.cSpecIds == this.lsProductSkusStr) {
										this.detail.fSuggestedPrice = item.fSuggestedPrice;
										this.detail.fSalePrice = item.fSalePrice;
										this.iSKUId = item.id;
										// this.detail.cTitleMemo = item.cSpecDescription
									}
								});
							}
						});
					this.specClass = "show";
				}
			},
			//选择规格
			selectSpec(index, pid) {
				let list = [];
				this.iSpecItemId = pid;
				this.specList.forEach((item, i) => {
					for (let [indexs, cItem] of new Map(
							item.lsSpecItem.map((cItem, indexs) => [indexs, cItem])
						)) {
						if (cItem.id === pid) {
							this.specList[i].lsSpecItem.forEach((items) => {
								this.$set(items, "selected", false);
							});

							this.$set(cItem, "selected", true);
						}
						list.push(cItem);
					}
				});

				//存储已选择
				/**
				 * 修复选择规格存储错误
				 * 将这几行代码替换即可
				 * 选择的规格存放在specSelected中
				 */
				this.specSelected = [];
				list.forEach((item) => {
					if (item.selected === true) {
						this.specSelected.push(item);
					}
				});
				let arr = [];
				this.specSelected.forEach((item) => {
					arr.push(item.id);
				});
				this.lsProductSkusStr = arr.join(";");
				this.detail.lsProductSkus.forEach((item) => {
					if (item.cSpecIds == this.lsProductSkusStr) {
						this.detail.fSuggestedPrice = item.fSuggestedPrice;
						this.detail.fSalePrice = item.fSalePrice;
						this.iSKUId = item.id;
						// this.detail.cTitleMemo = item.cSpecDescription
					}
				});
			},
		},
		onNavigationBarButtonTap(e) {
			if (e.text == "编辑") {
				var dd = document.getElementsByClassName("uni-page-head-btn");
				dd.forEach((item) => {
					if (item.children[0].innerText == "编辑") {
						item.children[0].innerText = "完成";

						this.edit = true;
					} else if (item.children[0].innerText == "完成") {
						item.children[0].innerText = "编辑";
						this.edit = false;
					}
				});
			} else {
				uni.navigateTo({
					url: `/pages/coupon/car`,
				});
			}
		},
	};
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.car {
		.empty {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
			padding-bottom: 100upx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background: #fff;

			image {
				width: 240upx;
				height: 160upx;
				margin-bottom: 30upx;
			}

			.empty-tips {
				display: flex;
				font-size: $font-sm + 2upx;
				color: $font-color-disabled;

				.navigator {
					color: $uni-color-primary;
					margin-left: 16upx;
				}
			}
		}

		.container {
			// padding-bottom: 184upx;
			padding: 0 20upx 184upx;

			.c-header {
				width: 100%;
				height: 80upx;
				background: rgba(255, 255, 255, 1);
				border: 1upx solid rgba(238, 238, 238, 1);
				border-radius: 9upx 9upx 0upx 0upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 23upx;
				margin-bottom: 21upx;

				.tips {
					width: 133upx;
					height: 45upx;
					display: inline-flex;
					justify-content: center;
					align-items: center;
					font-size: 20upx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #fff;
					background: rgb(240, 64, 111);
				}

				.desc {
					font-size: 21upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);
					margin-left: 9upx;
				}

				.right {
					flex: 1;
					text-align: right;
					font-size: 26upx;
					font-family: Microsoft YaHei;
					color: rgb(240, 64, 111);

					.icon-you {
						font-size: 26upx;
						color: rgb(240, 64, 111);
					}
				}
			}

			.car-list {
				width: 100%;
				// height:461px;
				background: rgba(255, 255, 255, 1);
				border-radius: 16upx;
				// padding: 0 20upx;
				margin-bottom: 21upx;

				.title_name {
					font-size: 30upx;
					display: flex;
					height: 60upx;
					align-items: center;
					//color: #f0406f;
					font-weight: bold;
					padding: 0 20upx;

					.left {
						width: 34upx;
						margin-right: 24upx;
						height: 34upx;

						image {
							width: 34upx;
							height: 34upx;
						}
					}

				}

				.line {
					width: 100%;
					height: 1upx;
					background-color: #eee;
					margin: 10upx 0;
				}

				.activity {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 0 22upx;

					.left {
						width: 34upx;
						margin-right: 24upx;
						height: 34upx;

						image {
							width: 34upx;
							height: 34upx;
						}
					}

					.middle {
						.name {
							background: #ef524d;
							padding: 2upx 6upx;
							border-radius: 4upx;
							font-size: 22upx;
							color: #fff;
							margin: auto 16upx;
						}

						.price {
							color: #f15b5c;
						}
					}

					.right {
						flex: 1;
						display: flex;
						justify-content: flex-end;
					}
				}

				.carbox {
					&:last-child .right {
						border: none;
					}
				}

				.list-item {
					display: flex;
					flex-direction: column;
					padding: 0 20upx;

					.top {
						display: flex;
						justify-content: flex-start;
						align-items: center;
					}

					.bottom {
						display: flex;
						flex-direction: column;
						padding-bottom: 10upx;

						.name {
							font-size: 24upx;
							color: #999;
						}
					}

					.left {
						width: 34upx;
						margin-right: 24upx;
						height: 34upx;

						image {
							width: 34upx;
							height: 34upx;
						}
					}

					.right {
						flex: 1;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						padding: 32upx 0;
						border-bottom: 2upx solid #ebebeb;

						.goods-img {
							width: 156upx;
							height: 156upx;
							background: rgba(255, 255, 255, 1);
							// border: 1upx solid rgba(217, 217, 217, 1);
							opacity: 0.97;
							border-radius: 2upx;
							margin-right: 31upx;

							image {
								width: 156upx;
								height: 156upx;
							}
						}

						.info {
							flex: 1;
							height: 156upx;

							.name {
								display: block;
								font-size: 30upx;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(0, 0, 0, 1);
								width: 400upx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								// line-height: 50upx;
							}

							.osku {
								background: #808080;
								color: #333;
								font-size: 18upx;
								display: inline-flex;
								justify-content: center;
								align-items: center;
								padding: 5upx 10upx;
								border-radius: 5upx;
								width: auto;
							}

							.price {
								display: flex;
								font-size: 33upx;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(240, 64, 111, 1);
							}

							.option {
								display: flex;
								font-size: 23upx;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(93, 93, 93, 1);
								justify-content: space-between;
								//margin-top: 30upx;
							}

							.picker {
								display: flex;
								font-size: 23upx;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(93, 93, 93, 1);
								justify-content: flex-start;
								margin-top: 20upx;
								align-items: center;
								display: flex;
								justify-content: space-between;
								align-items: center;
								position: relative;

								.down {
									width: 20upx;
									height: 20upx;
									transform: rotate(90deg);
									margin-left: 10upx;
									margin-top: 5upx;
								}

								.uni-input {
									display: flex;
									justify-content: flex-start;
									align-items: center;
									padding-left: 0;
								}

							}
						}

					}


				}
			}
		}

		.isiphonx {
			bottom: 80px;
		}

		.footer-btn {
			position: fixed;
			/* left: 30upx; */

			bottom: 50px;
			z-index: 95;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// width: 100%;
			height: 125upx;
			background: #1b1b1b;
			padding: 0 30upx;
			// margin-bottom: 50px;
			left: 0;
			right: 0;

			.left {
				width: 43%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.checkall {
					image {
						width: 34upx;
						height: 34upx;
						margin-right: 22upx;
					}

					font-size: 22upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					display: flex;
					align-items: center;
				}

				.freight {
					font-size: 22upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(136, 136, 136, 1);
				}
			}

			.right {
				width: 57%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.total {
					font-size: 33upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					white-space: nowrap;

					.price {
						font-size: 33upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(240, 64, 111, 1);
					}
				}

				.settlement {
					padding: 14upx 30upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 31upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					background: rgba(240, 64, 111, 1);
					border-radius: 29upx;
					color: rgba(255, 255, 255, 1);
					white-space: nowrap;
				}
			}
		}
	}

	/* 规格选择弹窗 */
	.attr-content {
		padding: 10upx 30upx;

		.a-t {
			display: flex;

			image {
				width: 170upx;
				height: 170upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 8upx;
			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
				line-height: 42upx;

				.price {
					font-size: $font-lg;
					color: $uni-color-primary;
					margin-bottom: 10upx;
				}

				.selected-text {
					margin-right: 10upx;
				}
			}
		}

		.attr-list {
			display: flex;
			flex-direction: column;
			font-size: $font-base + 2upx;
			color: $font-color-base;
			padding-top: 30upx;
			padding-left: 10upx;
		}

		.item-list {
			padding: 20upx 0 0;
			display: flex;
			flex-wrap: wrap;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				font-size: $font-base;
				color: $font-color-dark;
			}

			.selected {
				background: #fbebee;
				color: $uni-color-primary;
			}
		}
	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;

			.btn {
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $uni-color-primary;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30upx auto 20upx;
			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}
</style>
